<template>
     <div class="admin-layout">
            <el-container>
                <el-aside width="200px">
                    <admin-menu />
                </el-aside>
                <el-container>
                    <el-header class="admin-header">
                      <toolbar :store="userStore" />
                    </el-header>
                    <el-main>
                      <crumb />
                        <router-view />
                    </el-main>
                </el-container>
            </el-container>
        </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import useUserStore from '@/store/user'
import adminMenu from './ui/adminMenu.vue'
import toolbar from './ui/toolbar.vue'
import crumb from './ui/crumb.vue'

const userStore=useUserStore()
</script>

<style lang="scss" scoped>
.admin-layout {
  height: 100%;
  .el-container {
    min-height: 100%;
    .el-aside {
      background-color:rgba(0, 110, 255, 0.898039215686275);
      text-align: center;
      // display: flex;
      // justify-content: center;
    }
  }
  .admin-header {
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background-color: #FFFFFF;
  }
  .el-main{
    background-color: rgba(0, 110, 255, 0.0470588235294118);
  }
}</style>